<template>
  <div id="box">
    <div id="zhong">
      <div id="yi" @click="fu1()">
        <div id="er">
          <img src="img/YD/8.png" alt="" />
        </div>
        <div id="san">上新精选</div>
      </div>
      <div id="yi" @click="fu2">
        <div id="er">
          <img src="img/YD/7.png" alt="" />
        </div>
        <div id="san">小米众筹</div>
      </div>
      <div id="yi">
        <div id="er" @click="miaosha()">
          <img src="img/YD/8.png" alt="" />
        </div>
        <div id="san">有品秒杀</div>
      </div>
      <div id="yi">
        <div id="er" @click="fu3()">
          <img src="img/YD/9.png" alt="" />
        </div>
        <div id="san">生活优选</div>
      </div>
      <div id="yi">
        <div id="er" @click="fu4()">
          <img src="img/YD/10.png" alt="" />
        </div>
        <div id="san">小米自营</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fu1() {
      this.$router.push("/shangxin");
    },
    fu2() {
      this.$router.push("/zongchou");
    },
    fu3() {
      this.$router.push("/youxuan");
    },
    fu4() {
      this.$router.push("/ziying");
    },
    miaosha() {
      this.$router.push("/dpms");
    },
  },
};
</script>

<style scoped>
#box {
  width: 100%;
  height: 0.9rem;
  margin-top: 0.1rem;
}
#zhong {
  display: flex;
  height: 100%;
}
#yi {
  width: 20%;
  height: 100%;
}
#er {
  width: 100%;
  height: 0.76rem;
}
img {
  width: 100%;
  height: 100%;
}
#san {
  width: 100%;
  height: 0.14rem;
  font-size: 0.12rem;
  text-align: center;
}
</style>